<template>
    <div class="page">
        <el-row type="flex" justify="center" align="middle" class="container">
            <el-col class="hidden-md-and-down">
                <el-row class="panel">
                    <el-col :span="24">
                        <div class="right">
                            <div class="title-container">
								<img class="icon" src="../assets/login/sy-logo.png">
                                <h2>
									膳逸MIS管理平台
								</h2>
                            </div>
                            <div v-if="!qrCodeVisible">
                                <div class="row">
                                    <el-input
                                        v-model="username"
                                        placeholder="用户名"
                                        prefix-icon="user"
                                        size="large"
                                        clearable
                                    ></el-input>
                                </div>
                                <div class="row">
                                    <el-input
                                        type="password"
                                        v-model="password"
                                        placeholder="密码"
                                        prefix-icon="Lock"
                                        size="large"
                                        clearable
                                    ></el-input>
                                </div>
                                <div class="row">
                                    <el-button type="primary" class="btn" size="large" @click="login">
                                        登录系统
                                    </el-button>
                                </div>
                                <div class="row"><a class="link" @click="changeMode">二维码登录</a></div>
                            </div>
                            <div v-if="qrCodeVisible">
                                <div class="qrCode-container">
                                    <img :src="qrCode" height="153" class="qrCode" />
                                    <img src="../assets/login/phone.png" height="148" />
                                </div>
                                <div class="row"><a class="link" @click="changeMode">用户名密码登录</a></div>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import { isUsername, isPassword } from '../utils/validate.js';
import router from '../router/index.js';
// import { ElMessage } from 'element-plus'; // 一定不要这样手动引入了，已经设置好自动按需引入，再手动引入会冲突，样式丢失
export default {
    data: function() {
        return {
            username: null,
            password: null,
            qrCodeVisible: false,
            qrCode: '',
            uuid: null,
            qrCodeTimer: null,
            loginTimer: null
        };
    },

    methods: {
        login: function() {
            let that = this;
			
			console.log(that.username);
			
			if (!isUsername(that.username)) {
				console.log(that.username);
				ElMessage({
					message: '用户名格式错误',
					type: 'error',
					duration: 1200
				});
			} else if (!isPassword(that.password)) {
				ElMessage({
					message: '密码格式错误',
					type: 'error',
					duration: 1200
				});
			} else {
				let data = { username: that.username, password: that.password };
				console.log(data);
				that.$http("/mis_user/login", "POST", data, true, function(resp){
					if (resp.result) {
						let permissions = resp.permissions;
						let token = resp.token;
						localStorage.setItem('permissions', permissions);
						localStorage.setItem('token', token);
						router.push({ name: "Home" });
					} else {
						ElMessage({
							message: "用户名或密码错误！",
							type: 'error',
							duration: 1200
						});
					}
				})
			}
        }
    }
};
</script>

<style lang="less" scoped="scoped">
@import url('login.less');
</style>
